<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<!-- 
	 data 必须是一个函数
	 
	 props：父 -> 子组件传值
	 $emit：子 -> 父组件传值
	 -->
	<div id="app">
		<h1>{{ msg }}</h1>
		<!-- <button @click="counterAdd">counter: {{ counter }}</button>
		<button @click="counterAdd">counter: {{ counter }}</button>
		<button @click="counterAdd">counter: {{ counter }}</button>
		<button @click="counterAdd">counter: {{ counter }}</button>
		<button @click="counterAdd">counter: {{ counter }}</button> -->
		<my-msg></my-msg>
		<!-- 调用my-counter函数 -->
		<!-- <my-counter v-for="_ of 10"></my-counter> -->
		<!-- 传递实参 -->
		<my-counter mtitle="第一个"></my-counter><br>
		<my-counter mtitle="seconds"></my-counter><br>
		<my-counter mtitle="第3个"></my-counter><br>
		<my-counter v-on:counter-change="handleChange"></my-counter><br>
		<!-- click mouse* -->
	</div>
	
	<script src="vue.js"></script>
	<script>
		// 相当于定义一个名为my-counter函数
		Vue.component("my-counter", {
			template: `
				<div>
					<button @click="counterAdd">{{ mtitle }} counter: {{ counter }}</button>
					<hr>
				</div>
			`,
			// 组件参数的定义（相当于函数的形参）
			// props：父 -> 子组件传值
			// props: ["mtitle"],
			props: {
				// mtitle: String,
				mtitle: {
					type: String,
					default: "默认的Title"
				}
			},
			data: () => ({
				counter: 0 // 相当于局部变量
			}),
			methods: {
				counterAdd() {
					this.counter += 2
					// props 给组件 自定义属性
					// $emit 给组件 自定义事件
					this.$emit("counter-change")
				}
			}
		})
		
		
		// 声明定义自定义标签
		// Vue.component('组件名', { ...组件的选项（data, methods, computed, watch） })
		Vue.component('my-msg', {
			template: `<div>{{ msg }}</div>`,
			data() {
				return {
					msg: 'Hello Counter 1'
				}
			}
		})
		
		const app = new Vue({
			data: {
				msg: "Hello Vue: Component！",
			},
			methods: {
				handleChange() {
					console.log("counter更改了")
				}
			}
		}).$mount("#app")
	</script>
</body>
</html>